<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"   label-width="90px">
                    <el-form-item label="安检员:" style="width:250px">
                      <securityList v-model="form.data.securityCheckStaffId"  />
                    </el-form-item>
                    <el-form-item label="计划状态:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.status"  
                            placeholder="请选择">
                            <el-option
                              v-for="item in statusList"
                              :key="item.value"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="客户类别:" style="width:250px">
                      <customeList v-model="form.data.customerCateId"  />
                    </el-form-item>
                    <el-form-item label="安检区域:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.areaId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="客户类型:" style="width:250px">
                       <customeList v-model="form.data.customerCateId"  />
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="btnQuery">重置</el-button>
                        <label @click="btnDevelop" class="btn-open">展开 
                          <i :class="{'el-icon-arrow-down':!openStatus,'el-icon-arrow-up':openStatus}"  /></label>
                    </el-form-item>
                </el-form>
                <el-form label-width="120px" v-if="openStatus">
                   <el-form-item label="计划制定人:" style="width:300px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="计划制定时间:" style="width:300px">
                          <el-date-picker
                            v-model="form.projectId"
                            type="date"
                            size="mini" 
                            clearable
                            placeholder="选择日期">
                          </el-date-picker>
                    </el-form-item>
                    <el-form-item label="安检周期:" style="width:300px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item></el-form-item>
                </el-form>
          </div>
            <gridTable title="安检计划列表"
             width="200" 
            :data="tableData" 
            :page="form"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
            :columnList="columnList">
              <template #tools>
                     <el-button type="primary" size="mini"   icon="el-icon-plus" @click="btnOpen">新增</el-button>
                     <i class="el-icon-upload" title="下载" />
                </template>
                <template #actions="{row}">
                        <el-button  @click="btnDeales(row)"   type="text">查看</el-button>
                        <el-button  @click="btnDeales(row)"   type="text">编辑</el-button>
                        <el-button  @click="btnDeales(row)"   type="text">提交</el-button>
                        <el-button  type="text" style="color:#f56c6c"   @click="btnDel(row)">删除</el-button>
                  </template>
              </gridTable>
            <el-dialog  :visible.sync="dialogVisible" :close-on-click-modal="false"	 width="1200px"  :title="title">
               <!-- <planDetail /> -->
               <savePlan @close="dialogVisible=false" />
            </el-dialog>

  </div>
</template>

<script>
 import  {
  findCusSecurityCheckList,
  findAreaList,
  deleteCusSecurityCheck
 }  from '@/api/user'
import planDetail from './components/planDetail'
import savePlan from './components/savePlan'
import gridTable from '@/components/eTable'
import customeList from './components/customeList'
import securityList from './components/securityList'

export default {
  components:{
    planDetail,
    savePlan,
    gridTable,
    customeList,
    securityList
  },
  data() {
    return {
        statusList:[
          {text:'计划状态',value:'1'},
          {text:'未提交',value:'2'},
          {text:'未执行',value:'3'},
          {text:'已执行',value:'4'}
        ],
        tableData: [],
        dialogVisible:false,
        openStatus:false,
        form: {
          data:{
              status:'',
              securityCheckStaffId:'',
              status:'',
              customerCateId:'',
              areaId:''
          },
          page:1,
          pageSize:10,
          total:0
        },
        title:'',
        columnList:[
          {label:'安检名称',prop:'securityCheckName',iStrue:false},
          {label:'安检员',prop:'securityCheckStaffId',iStrue:true},
          {label:'安检员工号',prop:'securityCheckStaffId',iStrue:true},
          {label:'安检客户类型',prop:'customerCateId',iStrue:true},
          {label:'安检区域',prop:'securityCheckRange',iStrue:true},
          {label:'安检范围',prop:'securityCheckRange',iStrue:true},
          {label:'安检户数',prop:'securityCheckNum',iStrue:true},
          {label:'已安检户数',prop:'securityCheckedNum',iStrue:true},
          {label:'计划制定时间',prop:'createTime',iStrue:true,width:'200'},
          {label:'计划制定人',prop:'creatorId',iStrue:true},
          {label:'计划状态',prop:'status',iStrue:true},
          {label:'计划周期',prop:'securityCheckCycle',iStrue:true}      
        ],  
    }
  },
  created(){
     this.getPageList()
     
      findAreaList({
            page:1,
            pageSize:10,
            data:{pid:0}
        }).then((res)=>{
            
      })
  },
  methods: {
    btnQuery(){
      this.getPageList()
    },
    btnDevelop(){
      this.openStatus =!this.openStatus
    },
     getPageList(){
           findCusSecurityCheckList(this.form).then((res)=>{
               if(res.code==0){
                 this.tableData = res.data.data
                 this.form.total = res.data.total
              }else{
                 this.tableData = []
              }
          })
     },
     handleSizeChange(val) {
        this.form.pageSize = val
        this.getPageList()
      },
      handleCurrentChange(val) {
        this.form.page = val
        this.getPageList()
      },
      btnOpen(){
        this.title='新增信息'
        this.dialogVisible = true
      },
      btnDeales(item){
        console.log(item,'=======')
         this.title='详情'
        this.dialogVisible = true
      },
      btnDel(item){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           deleteCusSecurityCheck({id:item.id}).then((res)=>{
               if(res.code==0){
                 this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                   this.getPageList()
              }else{
                  this.$message({
                        message: '删除失败',
                        type: 'error'
                   })
              }
          })
        }).catch(() => {         
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
    height:100%;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>